/**
 * 产品信息详情列表
 * 
 * 
 * */
import React, { useMemo, useCallback } from 'react';
import Header from '@/component/layout/Header/Header';
import ListTitle from "@/component/layout/ListTitle/ListTitle";
import qs from "querystring";
import { getMedicalDetail } from '@/network/protocol';
import { formatTime } from '@/util/util'
// import "video-react/dist/video-react.css"; // import css
// import { Player } from 'video-react';
import './style.less';
import { useEffect, useState } from 'react';
import Loading from "@/component/layout/loading/loading";

const img1 = <img alt="" className="star" src={require('../../assests/img/statr1.png')} />
const img2 = require('../../assests/img/sousuo.png');

const MedicalDetail = (props) => {
  const [detail, setDetail] = useState({})
  const [loading1, setLoading1] = useState(true);

  const { location } = props;

  const medicalId = useMemo(() => {
    let search = location.search;
    if (!search) return;
    let str = search.slice(1);
    let param = qs.parse(str);
    return param.id
  }, [location.search])
  
  const getData = useCallback(async () => {
    try {
      let response = await getMedicalDetail({ medicalId })
      if (response.errorCode === 0) {
        let data = response.source;
        setDetail(data)
      }
      setLoading1(false)
    } catch (error) {
      setLoading1(false)
    }

  }, [medicalId])

  useEffect(() => {
    getData()
  }, [getData])
  if (loading1) return <Loading style={{ flex: 1 }} />

  return <>
    <Header
      right={<img className="icon-header-sousuo" src={img2} alt="" />}
      center={'产品信息'}
    />
    <div className="global-content ProDetail-box">
      <ListTitle img={img1} text={detail.name} />
      <div className="detail-box">
        <div className="detail-img1">
          <img src={detail.listImgUrl} alt="" />
        </div>

        {
          detail.videoUrl &&
          <div className="detail-img1">
            {/* <Player
              className="detail-vedio"
              playsInline
              src={detail.videoUrl}
            /> */}
                <video
              id="video"
              className="detail-img1 detail-vedio"
              src={detail.videoUrl}
              controls={true}
              preload="auto"
              webkit-playsinline="true" /* 这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放*/
              playsInline={true}  // IOS微信浏览器支持小窗内播放
              x5-video-player-type="h5"  // 启用H5播放器,是wechat安卓版特性
              x5-video-player-fullscreen="true" // 全屏设置，设置为 true 是防止横屏
              x5-video-orientation="portraint" // 播放器的方向， landscape横屏，portraint竖屏，默认值为竖屏
              style={{"objectFit":'fill'}}
            />
          </div>
        }


        <div className="detail-text" dangerouslySetInnerHTML={{ __html: detail.introduce }}>
        </div>

      </div>
      <div className="detail-time">
        <p>
          发表于：<span>{formatTime(detail.pubTime)}</span>
        </p>
      </div>
    </div>
  </>

}


export default React.memo(MedicalDetail)